/**
 * 设备地图展示
 */
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import { isSuccess } from '../../../configs/error';
import { getDeviceMapList } from '../../../services/device';
import { widgetApi } from '../../../services/analysis';
import DigitalBoard from '../../../components/digitalBoard';
import Pc from '../../../components/permissionControl';
import Filter from './filter';
import Map from './map';

const types = [
	{
		type: 'device', // 区分几个分析页面所使用的看板
		name: '设备总数',
		needQueryKeys: ['productId'],
		uri: widgetApi.deviceCount,
		dataKey: data => data.deviceCount
	},
	{
		type: 'device', // 区分几个分析页面所使用的看板
		name: '设备在线数',
		needQueryKeys: ['productId'],
		uri: widgetApi.deviceCount,
		dataKey: data => data.onlineDeviceCount
	},
	{
		type: 'device', // 区分几个分析页面所使用的看板
		name: '设备报警数',
		needQueryKeys: ['productId'],
		uri: widgetApi.deviceCount,
		dataKey: data => data.alarmDeviceCount
	},
	{
		type: 'device', // 区分几个分析页面所使用的看板
		name: '设备故障数',
		needQueryKeys: ['productId'],
		uri: widgetApi.deviceCount,
		dataKey: data => data.faultDeviceCount
	},
];

class DeviceMap extends Component {
	state = {
		queryData: {

		},
		list: [],
		sidebarProps: {}
	}

	componentWillMount() {
		this.query();
	}

	query = async () => {
		const { queryData } = this.state;
		const res = await getDeviceMapList(queryData);
		if (isSuccess(res)) {
			this.setState({ list: res.data });
		}
	}

	queryChange = queryData => {
		this.setState({
			queryData
		}, this.query);
	}

	render() {
		const { list, queryData, sidebarProps } = this.state;
		return (
			<Pc mode="permissionUrl">
				<div className="content-inner">
					<Row gutter={16} >
						{
							types.map(t => (
								<Col className="gutter-row" xs={24} sm={12} md={12} lg={6} permissionUrl={t.uri}>
									<DigitalBoard {...t} />
								</Col>
							))
						}
					</Row>
					<Filter search={this.queryChange} reset={() => this.setState({ sidebarProps: {} })} />
					<Map list={list} queryData={queryData} sidebarProps={sidebarProps} clickMarker={props => this.setState({ sidebarProps: props })} />
				</div>
			</Pc>
		);
	}
}

export default DeviceMap;
